<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>优惠卡劵</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../../../css/common.css" stylesheet" />
		<link rel="stylesheet" href="../../../../css/style.css" stylesheet" />
		<link rel="stylesheet" href="./css/index.css" />
	</head>
	<body>
		<div class="mui-content">
			<div class="main">
				<div id="slider" class="mui-slider">
					<!-- 顶部导航切换 -->
					<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted">
						<a class="mui-control-item mui-active" href="#item1">已领取</a>
						<a class="mui-control-item" href="#item2">待领取</a>
					</div>
					<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-1 defuatLeft "></div>
					<div class="mui-slider-group">
						<div id="item1" class="mui-slider-item mui-control-content mui-active">
							<div id="scroll1" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<div class="none">
										<img src="../../../../images/nonedata/icon_default_coupon.png">
									</div>
								</div>
							</div>
						</div>
						<div id="item2" class="mui-slider-item mui-control-content">
							<div id="scroll1" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<div class="none">
										<img src="../../../../images/nonedata/icon_default_coupon.png">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../../../../js/mui.min.js"></script>
	<script src="../../../../js/jquery-3.4.1.min.js"></script>
	<script src="../../../../js/resize.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function($) {
			// 文档一加载就执行
			obj.setRem()
			// 窗口调节
			$(window).resize(function() {
				obj.setRem()
			});
			$('.mui-scroll-wrapper').scroll({
				indicators: true //是否显示滚动条
			});
			// 已经领取的模拟数据
			let receivedData = [{
					discounts: '20',
					title: '满50可用',
					describe: '全场可用',
					time: '有效期至2021-12-31 23:59:59'
				},
				{
					discounts: '10',
					title: '无门槛',
					describe: '指定商品：韩束Kans补水保湿面膜 10片装',
					time: '有效期至2021-12-31 23:59:59'
				}, {
					discounts: '100',
					title: '满50可用',
					describe: '指定商品：欧莱雅黑精华 抗衰老紧致补水保湿精',
					time: '有效期至2021-12-31 23:59:59'
				},
				{
					discounts: '5',
					title: '无门槛',
					describe: '指定商品：欧莱雅黑精华 抗衰老紧致补水保湿精',
					time: '有效期至2021-12-31 23:59:59'
				},
			]
			// 设置数据-已领取
			function setReceivedData() {
				let recevedStr = '',
					item1 = document.getElementById('item1');
				if (receivedData.length > 0) {
					receivedData.forEach(item => {
						recevedStr += `<div class="had flex">
												<div class="left">
													<i>￥</i><span>${item.discounts}</span>
												</div>
												<div class="right">
													<h1 class="title">${item.title}</h1>
													<p class="describe one-txt-cut">${item.describe}</p>
													<p class="time">${item.time}</p>
												</div>
											</div>`
					})
					$('.none').css('display', 'none')
					item1.querySelector('.mui-scroll').innerHTML = recevedStr
				} else {
					$('.none').css('display', 'block')
				}

			}
			setReceivedData()
			// 没有领取
			function setReceivingData() {
				let recevedStr = '',
					item2 = document.getElementById('item2');

				if (receivedData.length > 0) {
					receivedData.forEach(item => {
						recevedStr += `<div class="had flex">
												<div class="left">
													<i>￥</i><span>${item.discounts}</span>
												</div>
												<div class="right">
													<h1 class="title">${item.title}</h1>
													<p class="describe one-txt-cut">${item.describe}</p>
													<p class="time">${item.time}</p>
													<p class="rightNow">立即领取</p>
												</div>
											</div>`
					})
					$('.none').css('display', 'none')
					item2.querySelector('.mui-scroll').innerHTML = recevedStr
				} else {
					$('.none').css('display', 'block')
				}

			}
			// 监听页面滑动事件
			var el_slider = document.getElementById('slider');
			el_slider && el_slider.addEventListener('slide', function(e) {
				console.log(e, '滑动组件');
				const {
					detail: {
						slideNumber = null
					}
				} = e;
				console.log('slideNumber', slideNumber)
				if (slideNumber == 0) {
					//	已经领取
					$('#sliderProgressBar').attr('class', 'item1left')

				} else {
					// 待领取
					$('#sliderProgressBar').attr('class', 'item2Left')
					setReceivingData()
				}
			})
		})
	</script>
</html>
